<template>
	<div>
		<el-row style="height: 50px;line-height: 50px;text-align: left;">
			<el-button type="primary" @click="addNew">添加网关</el-button>
		</el-row>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="name" label="网关名字" >
			</el-table-column>
			<el-table-column prop="ip" label="内网IP" >
			</el-table-column>
			<el-table-column prop="url" label="域名" >
			</el-table-column>
			<el-table-column prop="enabled" label="使用内网IP" >

			</el-table-column>
			<el-table-column fixed="right" label="操作" >
				<template slot-scope="scope">
					<!-- <el-button type="text" size="small"    @click.native.prevent="update(scope.$index, tableData)">修改</el-button> -->

	                <el-button type="primary" icon="el-icon-edit" circle @click.native.prevent="update(scope.$index, tableData)"></el-button>
					<el-button type="danger" icon="el-icon-delete" circle @click.native.prevent="delect(scope.$index, tableData)"></el-button>




				</template>
			</el-table-column>
		</el-table>
			<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage_all" :page-sizes="[15, 30, 45, 50]" :page-size="15" layout="total, sizes, prev, pager, next, jumper" :total="allCount">
			</el-pagination>
		</div>
		<el-dialog title="修改网关" :visible.sync="dialogFormVisible" :close-on-click-modal="ss">
			<el-form :model="form">
				<el-form-item label="输入网关名称" :label-width="formLabelWidth">
					<el-input v-model="addWayData.Name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="输入内网IP" :label-width="formLabelWidth">
					<el-input v-model="addWayData.IP" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="输入外网域名" :label-width="formLabelWidth">
					<el-input v-model="addWayData.Url" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="是否使用内网" :label-width="formLabelWidth">
					<el-switch v-model="addWayData.Inner" active-color="#13ce66" @change="innerChange(addWayData.Inner)" inactive-color="#ff4949">
					</el-switch>
					<template>
						{{addWayData.Inner?'正在使用内网':'正在使用外网'}}
					</template>
					
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				ss:false,
				currentPage_all:"",
				allCount:"",
				useWayName:"",
				isAdd: "true",
				addWayData: {
					"IP": "",
					"Url": "",
					"Inner": true,
					"Name":""
				},
				tableData: [],
				dialogFormVisible: false,
				formLabelWidth: "120px",
				value2: true,
				value1: true,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				getGeteWayData: {
					isPage: "true",
					PageIndex: "0",
					PageSize: "15"
				}
			};
		},
		methods: {
			innerChange(e) {
				if(e){
					this.useWayName = "使用内网"
				}else{
					this.useWayName = "使用外网"
				}
			},
			handleSizeChange(val) {
                this.getGeteWayData.PageSize = val ;
                this.getGeteWayData.PageIndex = 0;
                 this.getData();
			},
			handleCurrentChange(val) {
                 this.getGeteWayData.PageIndex = val - 1;
                 this.getData();
			},
			//一进来获取数据的方法
			getData() {
				this.$httpRequest.get('api/GateWay/GetList', this.getGeteWayData, response => {
					if(response.isSuccess) {
						var data = response.data;
						for(var i = 0; i < data.length; i++) {
							if(data[i].inner) {
								data[i].enabled = "使用内网"
							} else {
								data[i].enabled = "使用外网"
							}
						}
						this.tableData = data
						this.allCount = response.dataCount,//总台数
				        this.currentPage_all = this.allCount/this.getGeteWayData.PageSize;
					} else {

					}
				})
			},
			//保存的方法
			sure() {
				if(this.isAdd) { //新增
					this.$httpRequest.post('api/GateWay/Add', this.addWayData, response => {
						if(response.isSuccess) {
							this.dialogFormVisible = false
							this.getData()
							this.$notify({
								title: '添加内网',
								message: '成功',
								type: 'success'
							});
						} else {
							this.dialogFormVisible = false
							this.$notify({
								title: '添加内网失败',
								message: response.msg,
								type: 'error'
							});
						}
					})
				} else { //修改
					this.$httpRequest.post('api/GateWay/Update', this.addWayData, response => {
						if(response.isSuccess) {
							this.dialogFormVisible = false
							this.getData()
							this.$notify({
								title: '修改内网',
								message: '成功',
								type: 'success'
							});
						} else {
							this.dialogFormVisible = false
							this.$notify({
								title: '修改外网失败',
								message: response.msg,
								type: 'error'
							});
						}
					})
				}

			},
			//修改的方法
			update(a, b) {
				this.dialogFormVisible = true
				this.isAdd = false;
				debugger
				this.addWayData.IP = b[a].ip;
				this.addWayData.Url = b[a].url;
				this.addWayData.Inner = b[a].inner;
				this.addWayData.ID = b[a].id;
				this.addWayData.Name = b[a].name;
			},
		  //删除网关
			delect(a,b){
				debugger
               var delectData = {
				   ID:b[a].id
			   }
			   this.$httpRequest.post('api/GateWay/Delete', delectData, response => {
						if(response.isSuccess) {
							this.$notify({
								title: '删除网关',
								message: '成功',
								type: 'success'
							});
							this.getData()
						} else {
							this.$notify({
								title: '删除网关',
								message: response.msg,
								type: 'error'
							});
						}
					})
			},
			//新增的方法
			addNew() {
				this.dialogFormVisible = true
				this.isAdd = true;
				this.addWayData.IP = "";
				this.addWayData.Url = "";
				this.addWayData.Inner = true;
				this.addWayData.ID = "";
			}
		},
		created() {
			this.getData()
		}
	};
</script>

<style>
	@import url("//unpkg.com/element-ui@2.4.7/lib/theme-chalk/index.css");
</style>